<template>
    <div class="bg_gray">
        <div class="deal_tit" :class="{'isFixed': isFixed}">
            <p :class="{hot: indexTab=='0'}" @click="tabSwitch('0')">
                <span>全部订单</span>
                <!-- <span class="deal_span">{{dealNum.placedCount+dealNum.payedCount+dealNum.otherCount || '0'}}</span> -->
                <span class="deal_span">{{totalNum || '0'}}</span>
            </p>
            <p :class="{hot: indexTab=='1'}" @click="tabSwitch('1')">
                <span>待支付</span>
                <span class="deal_span">{{dealNum.placedCount || '0'}}</span>
            </p>
            <p :class="{hot: indexTab=='2'}" @click="tabSwitch('2')">
                <span>已支付</span>
                <span class="deal_span">{{dealNum.payedCount || '0'}}</span>
            </p>
            <!-- <p :class="{hot: indexTab=='3'}" @click="tabSwitch('3')">
                <span>其他</span>
                {{myOrder.otherCount || '0'}}
            </p> -->
        </div>
        <div class="clear"></div>
        <div class="coupon_deal_list"
             v-infinite-scroll="moreList"
             infinite-scroll-disabled="loading"
             infinite-scroll-immediate-check = "true"
             infinite-scroll-distance="100">
            <ul>
                <!-- <li v-for="item in myOrderList" v-if="item.orderState=='placed'||item.orderState=='payed'"> -->
                <li v-for="item in myOrderList">
                    <div class="deal_list_tit clearfix">
                        <span class="ftbd">{{item.mchtName}}</span>
                        <span class="right">{{item.orderDate|endtimeStampt}}</span>
                    </div>
                    <div class="deal_list_info" @click="orderJump(item)">
                        <div class="coupon_img">
                            <img :src="item.mchtLogUrl" lazy="error">
                            <div class="coupon_tag order_tag_red" v-if="item.orderState=='placed'">{{item.orderState=='placed'?'待付款':''}}</div>
                            <div class="coupon_tag order_tag_ye" v-else-if="item.orderState=='payed'">{{item.orderState=='payed'?'已支付':''}}</div>
                            <div class="coupon_tag order_tag_ye" v-else-if="item.orderState=='hidden'">{{item.orderState=='hidden'?'已支付':''}}</div>
                            <div class="coupon_tag order_tag_gray" v-else-if="item.orderState=='expire'">{{item.orderState=='expire'?'已过期':''}}</div>
                            <div class="coupon_tag order_tag_gray" v-else-if="item.flag=='0'">{{item.flag=='0'?'已过期':''}}</div>
                            <div class="coupon_tag " v-else-if="item.orderState=='revoke'">{{item.orderState=='expire'?'已取消':''}}</div>
                        </div>
                        <div class="deal_cont_key">
                            <p v-if="item.orderState!=='success'&&item.orderState!=='Unship'&&item.orderState!=='Shipped'&&item.orderState!=='Receive'&&item.type!=='present'&&item.type!=='ticket'">
                                <span class="bord_tit left ftbd">消费金额</span>
                                <span class="left deal_discount">¥{{item.amt}}</span>
                                <!-- <span v-if="item.type!='rebate'" class="left ftbd">¥{{(item.amt*100-item.couponAmt*item.couponNum*100)/100}}元</span> -->
                                <span class="left ftbd">¥{{((item.amt*100-item.couponAmt*100)/100)|formatMoney}}元</span>
                            </p>
                            <p v-if="item.couponNum>0">
                                <span class="left deal_cont_name">{{item.name}} </span>
                                <span class="left">×{{item.couponNum}}(张)</span>
                                <span class="left deal_pdl" v-if="item.couponTotalNum>1">等{{item.couponTotalNum}}张电子券</span>
                            </p>
                        </div>
                    </div>
                    <!-- <div v-if="item.orderState!='expire'" class="deal_list_btn"> -->
                    <div class="deal_list_btn">
                        <p class="expired_p left" v-if="item.orderState=='expire'">订单已过期，请重新扫码支付</p>
                        <div v-if="item.flag!='0'">
                            <a v-if="item.orderState == 'placed'" @click="payBill(item)" class="deal_btn_main margin_l">立即买单</a>
                            <a v-if="item.orderState == 'placed'" @click="cancelOrder(item)" class="deal_btn_sub">取消订单</a>
                        </div>

                        <a v-if="(item.commState=='wait'&&item.orderState=='payed')||(item.commState=='wait'&&item.orderState=='success')" @click="commentBtn(item)" class="deal_btn_main margin_l">评一下</a>
                        <a v-if="item.orderState != 'placed'&&item.orderState != 'payed'&&item.orderState != 'hidden'" @click="deleteOrder(item)" class="deal_btn_sub">删除订单</a>
                        <a v-if="item.commState == 'finish'&&item.orderState == 'payed'" @click="hiddenOrder(item)" class="deal_btn_sub hidden_order">隐藏订单</a>
                        <a v-if="item.orderState == 'hidden'" @click="hiddenOrder(item)" class="deal_btn_sub hidden_order">恢复订单</a>
                        <a v-if="item.flag == '0'" @click="deleteOrder(item)" class="deal_btn_sub">删除订单</a>
                        <!-- <span v-if="item.orderState === 'revoke'" class="right">已撤销</span> -->
                    </div>
                </li>
            </ul>
            <go-top v-show="goTopState" ref="goTopId"></go-top>
            <no-data v-if="noInfo"></no-data>
        </div>
        <div class="lastInfoMore" v-if="!moreInfo" v-show="myOrderList.length>2">没有更多</div>
        <div class="thirdOrder" v-show="thirdOrder"></div>
    </div>
</template>
<script>
    import * as types from '../../vuex/types.js'
    import listLoading from '../../componentes/global/listLoading.vue'
    import getData2 from '../../service/getData2.js'
    import {mapState} from 'vuex'
    import { Toast } from 'mint-ui'
    export default {
        name:"myOrder",
        data:function(){
          return{
            loading:true,
            noMoreCoupon:true,
            indexTab:'0',
            orderState:'0',
            dealNum:'',
            noInfo:false,
            couponTypes:'',
            totalNum:'',
            moreInfo:true,
            isFixed: false,
            goTopState:false,
            thirdOrder:false,
            payNum:''
          }
        },
        components:{
            listLoading
        },
        beforeRouteLeave(to, from, next){
            // 避免返回时未清除定时器
            if (this.$refs.goTopId) {
                this.$refs.goTopId.clear();
            }
            next()
        },
        created:function(){
          // 监视滚动
          window.addEventListener('scroll', this.handleScroll);
          window.addEventListener('scroll', this.gotopScroll);
            this.noInfo=false;
            this.$store.commit(types.MYORDER);//初始化列表
            this.$store.commit(types.MYORDER_PAGE,1);//初始化分页
            this.$store.commit(types.GET_SCORLL_STATUS,true);
            this.clickMoreList();
            //解决ios返回出现空白问题
            setTimeout(function(){
                window.scrollTo(0,1)
                window.scrollTo(0,0)
            },100)
        },
        computed:{
            ...mapState({
              myOrderList:state => state.center.myOrderList,
              myOrder:state => state.center.myOrder,
              myOrderPageLimit:state => state.center.myOrderPageLimit
            })
        },
        methods:{
            gotopScroll(){
                var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                var scrollHeight=document.documentElement.clientHeight||document.body.scrollTop;
                if (scrollTop>=scrollHeight+50) {
                    this.goTopState = true
                } else {
                    this.goTopState = false
                }
                //回到顶部过程中用户滚动滚动条，停止定时器
                if (scrollTop <= 0) {
                    if (this.$refs.goTopId) {
                        this.$refs.goTopId.clear();
                    }
                }
            },
          //监听滚动事件
          handleScroll() {
            var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
            if (scrollTop >= 80) {
              this.isFixed = true
            } else {
              this.isFixed = false
            }
          },
            clickMoreList:function(){
                if(!this.noMoreCoupon){//防止重复点击
                    return
                }
                let me = this;
                this.noMoreCoupon = false;
                this.$store.dispatch('myOrder',{method:'post',data:{"type":me.indexTab}}).then(function(rep){

                     if (me.indexTab==0) {
                        // if(rep.content.placedCount+rep.content.payedCount+rep.content.otherCount<=0){
                        //     me.noInfo=true
                        // }else{
                        //     me.noInfo=false
                        // }
                        me.totalNum=rep.content.total;
                        if(rep.content.total<=0){
                            me.noInfo=true
                        }else{
                            if(rep.content.total==3){
                                me.thirdOrder=true;
                            }
                            me.noInfo=false
                        }
                    }else if(me.indexTab==1){
                        if(rep.content.placedCount<=0){
                            me.noInfo=true
                        }else{
                            if(rep.content.placedCount==3){
                                me.thirdOrder=true;

                            }
                            if(rep.content.placedCount<3){
                                me.moreInfo=true
                            }
                            me.noInfo=false
                        }
                    }else if(me.indexTab==2){
                        if(rep.content.payedCount<=0){
                            me.noInfo=true
                        }else{
                            if(rep.content.payedCount==3){
                                me.thirdOrder=true;
                            }
                            me.noInfo=false
                        }
                    }

                    me.dealNum=rep.content;
                    if(rep.content.orderList){

                            for (var i = 0; i < rep.content.orderList.length; i++) {
                                  if (rep.content.orderList[i].flag==0) {
                                    getData2.changeList({method:'post',data:{'orderId':rep.content.orderList[i].orderId,'orderState':'expire'}}).then(function(rep){

                                    })
                                  }
                            }


                        if(rep.content.orderList.length < me.myOrderPageLimit){
                            setTimeout(function(){me.noMoreCoupon = true;},300);
                            me.moreInfo=false;
                        }
                        if(rep.content.orderList.length == me.myOrderPageLimit){//如果列表数据够10条，开启下拉加载
                            me.moreInfo=true;
                            me.loading = false;
                            me.noMoreCoupon = true;
                        }
                    }else{
                        setTimeout(function(){me.noMoreCoupon = true;},300);
                    }
                }).catch(function(rep){
                    setTimeout(function(){me.noMoreCoupon = true;},300);
                });

            },
            moreList:function(){
                this.loading = true;
                this.noMoreCoupon = true;
                this.clickMoreList();

            },
            tabSwitch:function(num){
                this.$store.commit(types.MYORDER);//初始化列表
                this.$store.commit(types.MYORDER_PAGE,1);//初始化分页
                this.indexTab = num;
                this.noMoreCoupon = true;
                this.clickMoreList();
            },
            //跳转详情
            orderJump:function(cont){

                this.$router.push({ name: 'orderDetail', query: { couponNo:cont.couponNo||'',mchtId:cont.mchtId,orderId:cont.orderId,usrId:cont.usrId,orderState:cont.orderState,couponsType:cont.type }})
                // this.$router.push({'path':'/orderDetail/'+params});
            },
            //跳转买单
            payBill:function(item){
                this.$router.push({'name':'payIndex',query:{o:item.orderId,m:item.mchtId}});
            },
            //评一下
            commentBtn:function(item){
                this.$store.commit("setPendingInfo",item);
                this.$router.push({name:'doComment', query:{mchtId:item.mchtId,couponNos:item.couponNo,orderId:item.orderId}})
            },
            // 删除订单
            deleteOrder:function(item){
                var me=this;
                getData2.deleteOrder({method:'delete'},item.usrId,item.orderId).then(function(rep){
                     console.log(rep);
                    if(rep.respCode=='00'){
                        Toast({
                            message: '操作成功',
                            duration: 800
                        });
                        setTimeout(function(){
                            me.$store.commit(types.MYORDER);//初始化列表
                            me.$store.commit(types.MYORDER_PAGE,1);//初始化分页
                            me.clickMoreList();
                        },500)
                    }else{
                        Toast({
                            message: rep.errorInfo,
                            duration: 800
                        });
                    }
                })
            },
            // 取消订单
            cancelOrder:function(item){
                var me=this;
                getData2.changeList({method:'post',data:{'orderId':item.orderId,'orderState':'revoke'}}).then(function(rep){
                    Toast({
                        message: rep.errorInfo,
                        duration: 800
                    });
                    if (rep.respCode=='00') {
                        setTimeout(function(){
                            me.$store.commit(types.MYORDER);//初始化列表
                            me.$store.commit(types.MYORDER_PAGE,1);//初始化分页
                            me.clickMoreList();
                        },800)
                        // location.reload()
                    }
                })
            },
            // 隐藏订单
            hiddenOrder:function(item){
                var me=this;
                var itemOrder;
                if (item.orderState=='hidden') {
                    itemOrder='payed'
                }else{
                    itemOrder='hidden'
                }
                getData2.changeList({method:'post',data:{'orderId':item.orderId,'orderState':itemOrder}}).then(function(rep){
                    Toast({
                        message: rep.errorInfo,
                        duration: 800
                    });
                    if (rep.respCode=='00') {
                        setTimeout(function(){
                            me.$store.commit(types.MYORDER);//初始化列表
                            me.$store.commit(types.MYORDER_PAGE,1);//初始化分页
                            me.clickMoreList();
                        },800)

                        // location.reload()
                    }
                })
            }

        }
    }

</script>
<style scoped>
.isFixed {
  position: fixed;
  top: 0;
  z-index: 1;
  height: 3.6rem;
  transition: height 1.5s;
}
</style>
<style>
    .expired_p{
        height: 3rem;
        line-height: 3.7rem;
        font-size: 1rem;
        text-align: right;
        padding-right: 1rem;
        color:#666;
    }
    .order_tag_gray{background: linear-gradient(to right,#999,#aaa,rgba(204,204,204,.7));}
    .hidden_order{color:#888;border-color:#888;}
    .thirdOrder{height:12rem;width:100%;}
</style>
